<template>
    <div class="movie-detail">
        <app-title :title="movie.cname" back='true'></app-title>
        <section class="movie-headers">
          <div class="movie-background" :style="movieBg"></div>
          <div class="movie-filter"></div>
          <div class="movie-container">
            <div class="movie-img">
              <img :src="movie.imgSrc" alt="电影海报">
            </div>
            <div class="movie-content">
              <div class="movie-name">{{movie.cname}}</div>
              <div class="movie-ename">{{movie.ename}}</div>
              <star-score v-if='movie.score' :score='movie.score'></star-score>
              <div class="movie-wanner" v-if='!movie.score'></div>
            </div>
          </div>
        </section>
    </div>
</template>
<script>
import AppTitle from '#/home/Title'
import StarScore from './StarScore'
export default {
  data () {
    return {
      movie: {}
    }
  },
  computed: {
    movieBg () {
      return {
        backgroundImage: `url(${this.movie.imgSrc})`
      }
    }
  },
  mounted () {
    this.loadDetail()
  },
  methods: {
    loadDetail () {
      this.$api['movie/detail']({}, {movieId: this.$route.params.movieId}).then(res => {
        this.movie = res
      })
    }
  },
  components: {
    AppTitle,
    StarScore
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../styles/common/var";
@import '../../../../styles/mixins/utils';
.movie-detail{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .app-title{
        width: 100%;
        height: $--tab-height;
        line-height: $--tab-height;
        position: absolute;
        top: 0;
        z-index: 10001;
        background: $--color-red;
    }
    .movie-headers{
      position: relative;
      top: $--tab-height;
      height: 365px;
      width: 100%;
      padding: 30px;
      .movie-background{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        filter: blur(30px);
        background-size: cover;
        background-image: gray;
        background-repeat: no-repeat;
        background-position-y: 40%;
      }
      .movie-filter{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background-color: #40454d;
        opacity: .55;
      }
      .movie-container{
        z-index: 1;
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        .movie-img{
          position: relative;
          width: 220px;
          height: 100%;
          border: solid 1px #f0f2f3;
          img{
            width: 100%;
            height: 100%;
          }
          &::after{
            content: "";
            position: absolute;
            bottom: 15px;
            right: 15px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            opacity: 0.8;
            background: url('../../../../assets/play.png')  no-repeat;
            background-size: 100%;
          }
        }
        .movie-content{
          flex: 1;
          padding-left: 30px;
          color: #fff;
          .movie-name{
            font-size: 30px;
          }
          .movie-ename{
            font-size: 20px;
            width: 400px;
            @include utils-ellipsis;
          }
          .movie-score{
            
          }
          .movie-category{
            
          }
          .movie-duration{
            
          }
          .movie-releasedate{
            
          }
        }
      }
    }
}
</style>
